/* SPDX-License-Identifier: Apache-2.0 */

/*
  A badge for highlighting important information.
  Use for small strings, or numbers.

  <span class="badge">Contributor</span>
  or
  <a class="badge">Sole owner</span>
*/

.badge {
  font-size: 0.7em;
  margin-left: 0.5em;
  vertical-align: 0.15em;
  text-transform: uppercase;
  border: 1px solid $primary-color;
  background-color: $primary-color;
  color: $white;
  padding: 0 7px;
  border-radius: 3px;
  font-weight: 600;
  white-space: nowrap;
  @include link-without-underline;

  .fa {
    margin-right: 0.4em;
  }

  &:hover {
    color: $white;
  }

  &:focus,
  &:active {
    border-color: $white;
    outline: 1px solid $primary-color;
  }

  &--success {
    background-color: $success-color;
    border-color: $success-color;

    &:focus,
    &:active {
      outline: 1px solid $success-color;
    }
  }

  &--danger {
    background-color: $danger-color;
    border-color: $danger-color;

    &:focus,
    &:active {
      outline: 1px solid $danger-color;
    }
  }

  &--warning {
    background-color: $warning-background-color;
    border-color: $warning-background-color;
    color: $warning-color;

    &:hover {
      color: $warning-color;
    }

    &:focus,
    &:active {
      outline: 1px solid $warning-color;
    }
  }

  &--neutral {
    background-color: $base-grey;
    border-color: $base-grey;
    color: darken($base-grey, 50);

    &:hover {
      color: darken($base-grey, 60);
    }

    &:focus,
    &:active {
      outline: 1px solid darken($base-grey, 50);
    }
  }
}

a.badge {
  text-decoration: underline;
}
